<template>
  <div>
    <div
      class="echart"
      id="echart-line"
      :style="{ float: 'left', width: '100%', height: '50vh' }"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      batchId: "",

      areaData: [],
      dalian: require("./dalain.json"),
    };
  },
  watch: {},
  computed: {},
  mounted() {
    this.initChar();
  },
  created() {},

  methods: {
    initChar() {
      var myChart = echarts.init(document.getElementById("echart-line"));
      echarts.registerMap("dalian", this.dalian, {});
      // 指定图表的配置项和数据
      var option = {
        series: [
          {
            name: "湖北省",

            label: {
              normal: {
                show: true,
              },

              emphasis: {
                show: true,
              },
            },

            itemStyle: {
              color: "#21252b",
            },

            type: "map",

            zoom: 1, //缩放比例

            roam: true,

            mapType: "dalian",

            emphasis: {
              label: {
                show: true,
              },
            },

            textFixed: {
              Alaska: [20, -20],
            },

            data: [
              {
                name: "十堰市",

                value: 4822023,
              },

              {
                name: "武汉市",

                value: 731449,
              },

              {
                name: "恩施市",

                value: 6553255,
              },

              {
                name: "茅箭区",

                value: 949131,
              },

              {
                name: "襄阳市",

                value: 8041430,
              },

              {
                name: "随州市",

                value: 5187582,
              },

              {
                name: "宜昌市",

                value: 3590347,
              },

              {
                name: "天门市",

                value: 917092,
              },

              {
                name: "咸宁市",

                value: 632323,
              },

              {
                name: "黄石市",

                value: 9317568,
              },
              {
                name: "荆门市",

                value: 200,
              },
            ],
          },
        ],

        visualMap: {
          left: "right",

          min: 1,

          max: 2300,

          inRange: {
            color: [
              "#313695",
              "#4575b4",
              "#74add1",
              "#abd9e9",
              "#e0f3f8",
              "#ffffbf",
              "#fee090",
              "#fdae61",
              "#f46d43",
              "#d73027",
              "#d73027",
              "#07b30e",
            ],
          },

          calculable: true,
        },

        tooltip: {
          trigger: "item",

          showDelay: 0,

          transitionDuration: 0.2,

          formatter: function (params) {
            var value = (params.value + "").split(".");

            value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, "$1,");

            return params.seriesName + "<br/>" + params.name + ": " + value;
          },
        },
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style lang='scss' scoped>
</style>